<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <%- include('../component/head') %>

</head>
<body>
<div id="fh5co-page">

    <%- include('../component/admin/left_menu') %>


    <div id="fh5co-main">

        <%- include('../component/admin/banner') %>

        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header bg-primary text-white d-flex justify-content-between">
                        <h6 class="mb-0 align-self-center" style="color: white;">用户管理</h6>
                    </div>
                    <div class="card-body" id="tables">


                        <vxe-table
                                border
                                resizable
                                show-overflow
                                highlight-hover-row
                                ref="xTable"
                                height="500"
                                :data="tableData"
                                @cell-dblclick="cellDBLClickEvent">
                            <vxe-table-column type="seq" width="60"></vxe-table-column>
                            <vxe-table-column field="id" title="id"></vxe-table-column>
                            <vxe-table-column field="username" title="用户名"></vxe-table-column>
                            <vxe-table-column field="phone" title="手机号"></vxe-table-column>
                            <vxe-table-column field="email" title="邮箱" show-overflow></vxe-table-column>
                            <vxe-table-column title="重置密码" width="160">
                                <template #default="{ row }">
                                    <template>
                                        <vxe-button @click="resetEvent(row)">重置密码</vxe-button>
                                    </template>
                                </template>
                            </vxe-table-column>
                            <vxe-table-column title="操作" width="100" show-overflow>
                                <template #default="{ row }">
                                    <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)"></vxe-button>
                                    <vxe-button type="text" icon="fa fa-trash-o" @click="removeEvent(row)"></vxe-button>
                                </template>
                            </vxe-table-column>
                        </vxe-table>

                        <vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600"
                                   min-height="300" :loading="submitLoading" resize destroy-on-close>
                            <template #default>
                                <vxe-form :data="formData" :items="formItems" :rules="formRules" title-align="right"
                                          title-width="100" @submit="submitEvent"></vxe-form>
                            </template>
                        </vxe-modal>

                        <vxe-pager
                                :current-page.sync="page4.currentPage"
                                :page-size.sync="page4.pageSize"
                                :total="page4.totalResult"
                                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
                        </vxe-pager>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<%- include('../component/admin/foot') %>


<script>
    const $VXE = VXETable.modal;
    new Vue({
        el: '#tables',
        data: {
            submitLoading: false,
            tableData: [],
            selectRow: null,
            showEdit: false,
            formData: {
                username: null,
                email: null,
                phone: null
            },
            formRules: {
                username: [
                    {required: true, message: '请输入名称'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符'}
                ],
                email: [
                    {required: true, message: '请输入邮箱'},
                    {
                        pattern: '^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\\.[a-zA-Z0-9]{2,6}$',
                        message: '请输入有效的邮箱'
                    }
                ],
                phone: [
                    {required: true, message: '请输入手机号'},
                    {type: 'number', message: '手机号必须是数字'},
                ]
            },
            formItems: [
                {
                    title: '*重置密码&新增用户，默认密码123456',
                    span: 24,
                    titleAlign: 'left',
                    titleWidth: 300,
                    titlePrefix: {icon: 'fa fa-address-card-o'}
                },
                {
                    field: 'username',
                    title: '用户名',
                    span: 12,
                    itemRender: {name: '$input', props: {placeholder: '请输入名称'}}
                },
                {
                    field: 'phone',
                    title: '手机号',
                    span: 12,
                    itemRender: {name: '$input', props: {placeholder: '请输入名称', disabled: 'disabled'}}
                },
                {
                    field: 'email',
                    title: '邮箱',
                    span: 12,
                    titleSuffix: {message: '提示信息！！', icon: 'fa fa-question-circle'},
                    itemRender: {name: '$input', props: {autosize: {minRows: 2, maxRows: 4}, placeholder: '请输入邮箱'}}
                },
                {
                    align: 'center',
                    span: 24,
                    titleAlign: 'left',
                    itemRender: {
                        name: '$buttons',
                        children: [{props: {type: 'submit', content: '提交', status: 'primary'}}, {
                            props: {
                                type: 'reset',
                                content: '重置'
                            }
                        }]
                    }
                }
            ],

            page4: {
                currentPage: 1,
                pageSize: 10,
                totalResult: 7
            },
        },
        created() {
            this.getData();
            mainFun();
        },
        methods: {
            cellDBLClickEvent({row}) {
                this.editEvent(row)
            },

            editEvent(row) {
                this.formData = {
                    username: row.username,
                    email: row.email,
                    phone: row.phone
                }
                this.selectRow = row
                this.showEdit = true
            },
            removeEvent(row) {
                $VXE.confirm('您确定要删除该数据?').then(type => {
                    const $table = this.$refs.xTable
                    if (type === 'confirm') {
                        XEAjax.post('/user/users.del', row)
                            .then((res) => {
                                $VXE.message({message:'删除成功！',status:'success'})
                                this.getData();
                            }).catch((err) => {
                                $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                            });
                    }
                })
            },
            resetEvent(row) {
                $VXE.confirm('你确定要重置密码么？').then(type => {
                    if (type === 'confirm') {
                        XEAjax.post('/user/users.reset', row).then((res) => {

                            $VXE.message({content: '重置密码', status: 'success'})
                        }).catch((err) => {
                            $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                        });

                    }
                })
            },
            submitEvent() {
                this.submitLoading = true
                Object.assign(this.selectRow, this.formData)
                XEAjax.post('/user/users.update', this.formData).then((res) => {
                    this.submitLoading = false
                    this.showEdit = false
                    $VXE.message({content: '保存成功', status: 'success'})
                    this.getData();
                }).catch((err) => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                });
            },

            getData() {
                XEAjax.post('/user/users.get', '').then((res) => {
                    if (res.msg === 's') {
                        this.tableData = res.userList;
                        $VXE.message({message: "用户数据更新", status: 'success'});
                    } else {
                        $VXE.message({message: "获取用户失败", status: 'error'});
                    }
                }).catch((err) => {
                    $VXE.message({message: '未知错误！错误代码：' + JSON.stringify(err), title: '错误', status: 'error'});
                });
            }
        }
    })
</script>
</body>
</html>
